<template>
  <div class="customersDetail">
    <c-title :hide="false" text="顾客详情"></c-title>
    <diyBackGround minHeight="8.5rem">
      <div class="member" v-if="info.has_one_member">
        <div class="member_img">
          <img :src="info.has_one_member.avatar_image" alt="" />
        </div>
        <div class="member_detail">
          <div class="member_detail_top">
            <div class="name">{{ info.has_one_member.nickname }}</div>
            <div class="tag">{{ info.has_one_member.uid }}</div>
          </div>
          <div class="member_detail_mobile">联系电话：{{ info.has_one_member.mobile }}</div>
          <div class="member_detail_orderTime">最近下单时间：{{ timestampToTime(info.last_order_time) }}</div>
        </div>
        <a @click.stop :href="`tel:${info.has_one_member.mobile}`">
          <div class="btn_pos"><i class="iconfont icon-hujiaokefu"></i>联系</div>
        </a>
      </div>
    </diyBackGround>
    <div class="list">
      <div class="list_top">
        <div class="list_top_lis" :class="{ lis_select: active == 1 }" @click="todayChange('1')">今日消费</div>
        <div class="list_top_lis" :class="{ lis_select: active == 2 }" @click="todayChange('2')">本月消费</div>
        <div class="list_top_lis" :class="{ lis_select: active == 0 }" @click="todayChange('0')">累计消费</div>
      </div>
      <div class="list_bottom">
        <div class="list_bottom_lis">
          <div class="list_bottom_lis_top">{{ info.sum_price }}</div>
          <div class="list_bottom_lis_bottom">消费金额（元）</div>
        </div>
        <div class="list_bottom_lis">
          <div class="list_bottom_lis_top">{{ info.order_count }}</div>
          <div class="list_bottom_lis_bottom">订单数（单）</div>
        </div>
        <div class="list_bottom_lis">
          <div class="list_bottom_lis_top">{{ info.avg_price }}</div>
          <div class="list_bottom_lis_bottom">单笔均价（元）</div>
        </div>
      </div>
    </div>
    <div class="childTab">
      <van-tabs v-model="active_child" @change="childTabChange" background="transparent" line-width="20px" title-active-color="#F15353">
        <van-tab title="订单" :title-style="active_child == 0 ? 'font-weight: bold;font-size: 0.94rem;' : ''"></van-tab>
        <van-tab title="售后" :title-style="active_child == 1 ? 'font-weight: bold;font-size: 0.94rem;' : ''"></van-tab>
        <van-tab title="浏览" :title-style="active_child == 2 ? 'font-weight: bold;font-size: 0.94rem;' : ''"></van-tab>
        <van-tab title="加购" :title-style="active_child == 3 ? 'font-weight: bold;font-size: 0.94rem;' : ''"></van-tab>
        <van-tab title="订阅品牌" :title-style="active_child == 4 ? 'font-weight: bold;font-size: 0.94rem;' : ''"></van-tab>
      </van-tabs>
      <!-- 订单 售后 加购 -->
      <template v-if="active_child == 0 || active_child == 1 || active_child == 3">
        <div v-for="item in dataList" :key="item.id" @click="toGoodDetail(item)">
          <div class="childTab_list" v-if="active_child == 0 || active_child == 1">
            <div class="list_top">
              <div class="list_top_l">订单号：{{ item.order_sn }}</div>
              <div class="list_top_r">{{ item.status_name }}</div>
            </div>
            <div class="lis_conten" v-for="(items, index) in item.order_goods" :key="index">
              <img class="lis_conten_img" :src="items.thumb" alt="" />
              <div class="lis_conten_good">
                <div class="title">{{ items.title }}</div>
                <div class="options" v-if="items.goods_option_title">{{ items.goods_option_title }}</div>
              </div>
            </div>
            <div class="lis_time">支付时间：{{ item.pay_time }}</div>
            <div class="lis_order">
              <div class="txt">共{{ item.goods_total }}件商品 付款：¥{{ item.price }}</div>
              <div class="txt">预估收入{{ $i18n.t("money") }}{{ item.reward_amount }}</div>
            </div>
          </div>
          <div class="childTab_list" v-if="active_child == 3">
            <div class="lis_conten">
              <img class="lis_conten_img" :src="item.thumb" alt="" />
              <div class="lis_conten_good">
                <div class="title">{{ item.goods_name }}</div>
                <div class="options" v-if="item.option_name">{{ item.option_name }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 订阅 -->
      <template v-if="active_child == 4">
        <div class="browse" v-for="item in dataList" :key="item.id">
          <img :src="item.logo" class="browse_img" alt="" />
          <div class="browse_right">
            <div class="browse_right_l">
              <div class="browse_right_l_t">{{ item.name }}</div>
              <div class="browse_right_l_b">共{{ item.collect_count }}个会场</div>
            </div>
            <div class="browse_right_r">已订阅</div>
          </div>
        </div>
      </template>
      <div class="browseBox" v-if="active_child == 2">
        <div class="lis" v-for="item in dataList" :key="item" @click="toGood(item)">
          <div class="date">{{ item.date_group }}</div>
          <div class="good_box">
            <div class="good_lis" v-for="items in item.goodsList" :key="items">
              <div class="good_img">
                <img :src="items.thumb" alt="" />
              </div>
              <div class="good">
                <div class="good_title">{{ items.title }}</div>
                <div class="price" v-if="items.vip_level_status && items.vip_level_status.status == 1">{{ $i18n.t("money") }}100.00</div>
                <div class="price" v-else-if="items.has_option">{{ $i18n.t("money") }}{{ $i18n.t("money") }}{{ items.option_price ? items.option_price : items.price }}</div>
                <div class="price" v-else>{{ $i18n.t("money") }}{{ items.price }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import diyBackGround from "components/diyBackGround";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      active: 1,
      active_child: 0,
      info: [],
      dataList: [],
      page: 1,
      total_page: 0,
      isLoadMore: true
    };
  },
  activated() {
    this.active = 1;
    this.getData();
    this.init();
    this.getChildData();
  },
  methods: {
    timestampToTime: function(timestamp) {
      if (!Number(timestamp) || timestamp == "") {
        return "";
      }
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "/";
      let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "/";
      let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      return Y + M + D + h + m;
    },
    toGood(item) {
      this.$router.push(this.fun.getUrl("goods", { id: item.goods_id }));
    },
    toGoodDetail(item) {
      if (this.active_child == 3) {
        this.$router.push(this.fun.getUrl("cart", {}));
        return;
      }
      this.$router.push(this.fun.getUrl("orderdetail", { order_id: item.id, orderType: "cloud_shop" }));
    },
    todayChange(key) {
      this.active = key;
      this.getData();
    },
    init() {
      this.dataList = [];
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
    },
    childTabChange() {
      this.init();
      this.getChildData();
    },
    async getMoreData() {
      console.log("ddddddddddddddd", this.isLoadMore, this.page, this.total_page);
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let urlStr = "";
        let json = {
          customer_uid: this.$route.params.id,
          page: this.page
        };
        if (this.active_child == "0") {
          urlStr = "plugin.cloud-shop.frontend.customer.orderList";
          json.is_refund = 0;
        } else if (this.active_child == "1") {
          urlStr = "plugin.cloud-shop.frontend.customer.orderList";
          json.is_refund = 1;
        } else if (this.active_child == "2") {
          urlStr = "plugin.cloud-shop.frontend.customer.historyList";
        } else if (this.active_child == "3") {
          urlStr = "plugin.cloud-shop.frontend.customer.cartList";
        } else if (this.active_child == "4") {
          urlStr = "plugin.cloud-shop.frontend.customer.brandList";
        }
        let { data, msg, result } = await $http.post(urlStr, json, "");
        this.isLoadMore = true;
        if (result) {
          if (this.active_child == "0" || this.active_child == "1") {
            this.dataList = data.data;
            return;
          } else if (this.active_child == "2") {
            let myData = data.member_histories;
            let footPrintArr = [];
            footPrintArr[0] = myData[0];
            this.$nextTick(() => {
              let datas = this.handlerFootPrint(myData, footPrintArr); //处理数据结构
              datas.map((item, index) => {
                if (this.dataList[this.dataList.length - 1].date_group === datas[0].date_group) {
                  let dataGroup = this.dataList[this.dataList.length - 1].goodsList;
                  this.dataList[this.dataList.length - 1].goodsList = [...dataGroup, ...item.goodsList];
                  datas.shift();
                }
              });
              this.dataList = [...this.dataList, ...datas];
            });
            return;
          } else if (this.active_child == "3") {
            this.dataList = data.data;
          } else if (this.active_child == "4") {
            this.dataList = data.data;
          }
        } else {
          this.page = this.page - 1;
          this.$toast(msg);
        }
      }
    },
    async getChildData() {
      let urlStr = "";
      let json = {
        customer_uid: this.$route.params.id
      };
      if (this.active_child == "0") {
        urlStr = "plugin.cloud-shop.frontend.customer.orderList";
        json.is_refund = 0;
      } else if (this.active_child == "1") {
        urlStr = "plugin.cloud-shop.frontend.customer.orderList";
        json.is_refund = 1;
      } else if (this.active_child == "2") {
        urlStr = "plugin.cloud-shop.frontend.customer.historyList";
      } else if (this.active_child == "3") {
        urlStr = "plugin.cloud-shop.frontend.customer.cartList";
      } else if (this.active_child == "4") {
        urlStr = "plugin.cloud-shop.frontend.customer.brandList";
      }
      let { data, msg, result } = await $http.post(urlStr, json, "");
      if (result) {
        if (this.active_child == "0" || this.active_child == "1") {
          this.dataList = data.data;
        } else if (this.active_child == "2") {
          this.dataList = data.member_histories;
          let footPrintArr = [];
          footPrintArr[0] = this.dataList[0];
          this.dataList = this.handlerFootPrint(this.dataList, footPrintArr);
        } else if (this.active_child == "3") {
          this.dataList = data.data;
        } else if (this.active_child == "4") {
          this.dataList = data.data;
        }
        this.total_page = data.last_page;
        console.log(this.page, data.last_page);
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    handlerFootPrint(datas, footPrintArr) {
      if (datas.length === 0) return [];
      let i = 0;
      console.log(datas);
      datas.map((item, index) => {
        this.$set(item, "goodsList", []);
        this.$set(item, "checked", false);
        this.$set(item.goods, "delId", item.id);
        this.$set(item.goods, "owner_id", item.owner_id);
        this.$set(item.goods, "vip_level_status", item.vip_level_status);
        this.$set(item.goods, "option_price", item.option_price);
        this.$set(item, "dataName", this.getDate(item.date_group)); //处理数据格式显示
        if (footPrintArr[i].date_group === (datas[index] && datas[index].date_group)) {
          footPrintArr[i].goodsList.push(datas[index].goods);
        } else {
          i++;
          footPrintArr.push(datas[index]);
          footPrintArr[i].goodsList.push(datas[index].goods);
        }
      });
      console.log(footPrintArr, "wwwwww2222222wwwwww");
      return footPrintArr;
    },
    getDate(str) {
      //处理日期时间
      if (!str) return;
      let strArr = str.split("-");
      let year = strArr[0];
      let month = strArr[1].replace("月", "");
      let day = strArr[2];
      let date = (year + "年" + month + "月" + day + "日").toString();
      return date;
    },
    async getData() {
      let json = {
        customer_uid: this.$route.params.id,
        time_type: this.active
      };
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.customer.detail", json, "");
      if (result) {
        this.info = data;
      } else {
        this.$toast(msg);
      }
    }
  },
  components: { diyBackGround }
};
</script>
<style lang="scss" scoped>
.childTab {
  margin: 0 0.75rem;
  .childTabSelect {
    color: #f15353;
  }
  .browseBox {
    .lis {
      margin-top: 1.56rem;
      .date {
        font-weight: bold;
        font-size: 1rem;
        text-align: left;
      }
      .good_box {
        display: flex;
        flex-wrap: wrap;
        margin-top: 0.97rem;
        .good_lis {
          margin-bottom: 0.38rem;
          background: #ffffff;
          border-radius: 0.5rem;
          width: 7rem;
          overflow: hidden;
          margin-right: 0.38rem;
          .good_img {
            width: 7.06rem;
            height: 7.06rem;
            border-radius: 0.5rem 0.5rem 0 0;
            img {
              width: 100%;
              height: 100%;
              border-radius: 0.5rem 0.5rem 0 0;
            }
          }
          .good {
            padding: 0.5rem;
            box-sizing: border-box;
            overflow: hidden;
            text-align: left;
            .good_title {
              text-align: left;
              font-weight: 500;
              font-size: 0.88rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .price {
              font-weight: bold;
              font-size: 1rem;
              color: #f15353;
              text-align: left;
            }
          }
        }
        .good_lis:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }
  .browse {
    padding: 0.63rem 0.53rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.5rem;
    display: flex;
    margin-top: 0.66rem;
    .browse_right {
      flex: 1;
      display: flex;
      justify-content: space-between;
      .browse_right_r {
        margin: 0.63rem 0;
        width: 3.75rem;
        height: 1.75rem;
        background: #ffffff;
        border-radius: 0.88rem 0.88rem 0.88rem 0.88rem;
        border: 0.03rem solid #aaaab3;
        line-height: 1.75rem;
        text-align: center;
      }
      .browse_right_l {
        display: flex;
        flex-direction: column;
        flex: 1;
        text-align: left;
        justify-content: center;
        .browse_right_l_t {
          font-weight: bold;
          font-size: 1rem;
          color: #00001c;
        }
        .browse_right_l_b {
          font-size: 0.75rem;
          color: #808080;
          margin-top: 0.3rem;
        }
      }
    }
    .browse_img {
      flex-shrink: 0;
      width: 3rem;
      height: 3rem;
      background: #e9e9e9;
      border-radius: 0.5rem;
      border: 0.03rem solid #e9e9e9;
      margin: 0;
      margin-right: 0.38rem;
    }
  }
  .childTab_list {
    padding: 0.81rem 0.75rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-top: 0.66rem;
    .list_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .list_top_l {
        font-weight: 500;
        font-size: 0.81rem;
        color: #00001c;
      }
      .list_top_r {
        font-size: 0.81rem;
        color: #f15353;
      }
    }
    .lis_conten {
      display: flex;
      margin-top: 0.78rem;
      .lis_conten_good {
        flex: 1;
        display: flex;
        flex-direction: column;
        text-align: left;
        .title {
          font-weight: 500;
          font-size: 0.88rem;
        }
        .options {
          font-size: 0.81rem;
          color: #9898a1;
          margin-top: 0.5rem;
        }
      }
      .lis_conten_img {
        margin: 0;
        width: 4.38rem;
        height: 4.38rem;
        background: #d6d6dc;
        border-radius: 0.63rem;
        margin-right: 0.53rem;
      }
    }
    .lis_time {
      font-size: 0.81rem;
      color: #9898a1;
      text-align: left;
      margin-top: 0.63rem;
    }
    .lis_order {
      margin-top: 0.75rem;
      .txt {
        text-align: right;
        font-size: 0.88rem;
        color: #00001c;
        margin-bottom: 0.44rem;
      }
      .txt:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.list {
  background: #ffffff;
  margin: 0 0.75rem;
  margin-top: -3rem;
  border-radius: 0.5rem;
  .list_bottom {
    height: 4.31rem;
    display: flex;
    justify-content: space-between;
    .list_bottom_lis {
      width: calc(100% / 3);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .list_bottom_lis_top {
        font-size: 0.94rem;
        color: #00001c;
        font-weight: bold;
      }
      .list_bottom_lis_bottom {
        font-size: 0.75rem;
        color: #6e6e79;
      }
    }
  }
  .list_top {
    // padding: 0.78rem 0;
    height: 2.5rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9e9e9;
    .lis_select {
      font-size: 0.88rem;
      color: #f15353;
      position: relative;
    }
    .lis_select::before {
      position: absolute;
      content: "";
      left: calc(50% - 0.5rem);
      bottom: 0;
      width: 1rem;
      height: 0.16rem;
      background: #f15353;
      border-radius: 0.94rem;
    }
    .list_top_lis {
      height: 100%;
      flex: 1;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.member {
  display: flex;
  align-items: center;
  padding-top: 0.81rem;
  padding-left: 1.06rem;
  padding-right: 3.31rem;
  box-sizing: border-box;
  position: relative;
  .btn_pos {
    width: 3.31rem;
    height: 1.25rem;
    background: #ffffff;
    border-radius: 0.94rem 0rem 0rem 0.94rem;
    position: absolute;
    right: 0;
    top: 1rem;
    font-size: 0.69rem;
    color: #f15353;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon-hujiaokefu {
      font-size: 0.6rem;
      color: #f15353;
      margin-right: 0.2rem;
    }
  }
  .member_img {
    width: 3.44rem;
    height: 3.44rem;
    background: #737373;
    margin-right: 0.53rem;
    border-radius: 50%;
    flex-shrink: 0;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .member_detail {
    flex: 1;
    text-align: left;
    overflow: hidden;
    .member_detail_top {
      display: flex;
      align-items: center;
      .name {
        font-size: 1rem;
        color: #ffffff;
        font-weight: bold;
        white-space: nowrap;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .tag {
        font-size: 0.69rem;
        color: #ffffff;
        padding: 0.28rem 0.53rem;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 10);
        margin-left: 0.34rem;
        border-radius: 0.63rem;
        flex-shrink: 0;
      }
    }
    .member_detail_mobile {
      font-size: 0.69rem;
      color: #ffffff;
      margin: 0.22rem 0;
    }
    .member_detail_orderTime {
      font-size: 0.69rem;
      color: #ffffff;
    }
  }
}
</style>
